<script setup lang="ts">
import { onMounted, ref } from "vue";
import { queryTeamById, updateTeam } from "@/services/teamService";
import { showToast } from "vant";
import { useRoute } from "vue-router";
import router from "@/router";

const route = useRoute();
let teamData = ref({});
onMounted(async () => {
  //获取队伍id
  let { id } = route.query;
  //获取队伍数据
  const res = await queryTeamById(id);
  const { message, description, code, data } = res;
  if (code === 0) {
    teamData.value = data;
  } else {
    showToast(description.length ? description : message);
  }
});
//时间选择器
const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
  teamData.value.expireTime = selectedValues.join("-") + " 00:00:00";
  showPicker.value = false;
};
//表单提交
const onSubmit = async () => {
  const res = await updateTeam(teamData.value);
  const { message, description, code } = res;
  if (code === 0) {
    showToast("更新成功");
    router.back();
  } else {
    showToast(description.length ? description : message);
  }
};
</script>

<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        name="name"
        v-model="teamData.name"
        label="队伍名称"
        placeholder="请输入队伍名称"
        :rules="[{ required: true, message: '请填写队伍名称' }]"
      />
      <van-field
        name="expireTime"
        v-model="teamData.expireTime"
        is-link
        readonly
        label="过期时间"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker
          @confirm="onConfirm"
          @cancel="showPicker = false"
          :min-date="new Date()"
        />
      </van-popup>
      <van-field
        name="description"
        v-model="teamData.description"
        rows="1"
        autosize
        label="队伍描述"
        type="textarea"
        placeholder="请输入队伍描述"
      />
      <van-field name="status" label="队伍状态">
        <template #input>
          <van-radio-group v-model="teamData.status" direction="horizontal">
            <van-radio :name="0">公开</van-radio>
            <van-radio :name="1">私有</van-radio>
            <van-radio :name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        name="password"
        v-if="teamData.status === 2"
        v-model="teamData.password"
        type="password"
        label="队伍密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" size="small">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<style scoped></style>
